<template>
  <view class="app-container">
    <u-cell-group :border="false" class="notice">
      <u-cell :border="false" icon="../../static/icons/shouyi.svg">
        <view slot="title">
          <text class="text">分享收益</text>
        </view>
        <view slot="value">
          <text class="value">￥{{ award }}</text>
        </view>
      </u-cell>
    </u-cell-group>
    <div class="tixian">
      <h5>余额</h5>
      <h2>￥{{ award }}</h2>
      <u-button text="提现" type="primary" shape="circle" @click="onClick" :disabled="Number(award)<=0"></u-button>
    </div>
    <earnings-component type="share" :data="earnData"></earnings-component>
  </view>
</template>

<script>
import { incomeRecords } from '@/api/api.js'
import EarningsComponent from '@/components/Earnings/Earnings.vue'
export default {
  components: { EarningsComponent },
  data() {
    return {
      //总金额
      award: '',
      earnData: []
    }
  },
  onLoad() {
    this.award = this.$store.state.user.award
    incomeRecords().then(res => {
      if (res.code === 10000) {
        this.earnData = res.data
      }
    })
  },
  methods: {

    onClick() {
      uni.navigateTo({
        url: '/pages/tixian/tixian'
      })
    },
  }
}
</script>

<style lang="scss">
.notice {
  background-color: #fff;
  height: 58px;
  line-height: 58px;
  box-sizing: border-box;
  margin-bottom: 16px;

  .text {
    color: #00b6fc;
  }

  .value {
    font-size: 24px;
  }

  .u-cell-group__wrapper {
    height: 100%;
  }

  .u-cell__body {
    padding: 0 15px !important;
  }
}

.tixian {
  padding: 12px 40px;
  background-color: #fff;
  text-align: center;

  h2 {
    margin: 8px 0 20px 0;
  }
}</style>
